<template>
    <div>
        <div class="activity-right" style="padding-top:20px;">
            <h3>活动商品</h3>
            <el-button class='right' style="margin-bottom:20px;" type="primary" @click="goBack"> 返回活动 </el-button>
            <el-form ref="form" style="width:80%;" :model="form" label-width="100px">
                <el-input style="width:25%;" class='input' @keyup.enter.native="searchRequest(page)" prefix-icon="el-icon-search" clearable v-model="searchName"  placeholder="请输入商品名称"></el-input>
                <el-input style="width:25%;" class='input' @keyup.enter.native="searchRequest(page)" prefix-icon="el-icon-search" clearable v-model="barCode"  placeholder="请输入商品条码"></el-input>
                <el-button type="primary" @click.enter="searchRequest(page)" icon="el-icon-search">搜索</el-button>
            </el-form>
            <section class="table">
                <el-table class="table-common" ref="multipleTable" :data="goodsList" tooltip-effect="dark" style="width: 100%">
                    <el-table-column prop="goods_pic" label="商品图片" width="180">
                        <template slot-scope="scope" >
                            <img  v-if="scope.row.goods_pic != undefined"  :src="scope.row.goods_pic" @click="handleClick(scope)" alt="">
                            <img v-else  src="https://goods.dingdian.xin/FlnRd5l-LXhjqxv6o8_0KuVBpDy0?imageMogr2/thumbnail/300000@" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column label="商品编号" prop="goods_code" width="180">
                    </el-table-column>
                    <el-table-column label="商品名称" prop="goods_name" width="180">
                    </el-table-column>
                    <el-table-column prop="goods_price" label="商品价格(元)" width="120">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.goods_price" @blur="priceChange(scope.row)" placeholder="请输入内容"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="discount_rate" label="商品折扣(折)" width="120">
                    </el-table-column>
                    <el-table-column prop="discount_price" label="折扣价格(元)" width="120">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.discount_price" @blur="priceChange(scope.row)" placeholder="请输入内容"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="member_price" label="会员价(元)" width="120">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.member_price" @blur="priceChange(scope.row)" placeholder="请输入内容"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品状态" prop="soldout" width="80">
                        <template slot-scope="scope"> {{scope.row.soldout == 0 ? '上架' : '下架'}}</template>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="editGoods(scope)">编辑</el-button>
                            <el-button v-if="scope.row.soldout == 0" type="text" size="small" @click="soldChange(scope,1)">下架</el-button>
                            <el-button v-else type="text" size="small" @click="soldChange(scope,0)">上架</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <section class="pagination">
                    <el-pagination background layout="total,prev, pager, next,jumper" :page-count="Math.ceil(total/10)" :total="total" :page-size="10" :current-page.sync="page" @current-change="handlePageChange">
                    </el-pagination>
                </section>

            </section>
        </div>
         <div v-if="isShow" class="bigImg">
            <img :src="imgSrc" alt="">
            <i class="el-icon-circle-close-outline close" title="关闭" @click="close"></i>
        </div>
         <div v-if="isShow" class="wrap-wrap"></div>
    </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
import {
    activityGoodsForPc,
    getGoodsById,
    updateGoods,
    editGoodsByPc
} from "../../data/postData";
export default {
    data() {
        return {
            user: JSON.parse(localStorage.getItem("ddaigoUser")),
            form: {
                goods_pic: "",
                goods_code: "",
                category_id: "",
                goods_name: "",
                specs_name: "",
                searchName: ""
            },
            isShow: false,
            imgSrc: '',
            barCode: '',
            searchName: "",
            goodsItem: [],
            selGoodItemVal: [],
            isShowGoodsItem: false,
            goodsItem1: [],
            goodsItem2: [],
            goodsItem3: [],
            goodsList: null,
            total: 0,
            page: this.$store.state.activity.activityGoodsListPage,
            size: 5
        };
    },
    mounted() {
       // var that = this;
        let { goodsPage,goodsName,barCode } = this.$store.state.activity;
       // this.page = goodsPage || 1;
        this.searchName = goodsName || '';
        this.barCode = barCode || '';
        this.searchRequest(this.page);
        
    },
    methods: {
        handleClick(scope){
            this.isShow = true
            this.imgSrc = scope.row.goods_pic
        },
        close(){
            this.isShow = false
        },
        priceChange(val){
            if(('' + val.goods_price).trim() === ''){
                this.$message({
                    message: '请输入原价',
                    type: "warning"
                });
            }else if(('' + val.member_price).trim() === ''){
                this.$message({
                    message: '请输入会员价',
                    type: "warning"
                });
            }else if(('' + val.discount_price).trim() === ''){
                this.$message({
                    message: '请输入折扣价',
                    type: "warning"
                });
            }else if(+val.discount_price > +val.goods_price){
                this.$message({
                    message: '折扣价不能大于原价',
                    type: "warning"
                });
                val.discount_price = ''
            }else if(+val.member_price > +val.discount_price){
                this.$message({
                    message: '会员价不能大于折扣价',
                    type: "warning"
                });
                val.member_price = ''
            }else{
                val.discount_rate = parseInt(Math.round((+val.discount_price/(+val.goods_price))*100))/10
                val.member_rate = parseInt(Math.round((+val.member_price/(+val.discount_price))*100))/10
                let params = {
                    data:{
                        goodsId: +val.goods_id,
                        memberPrice: +val.member_price,
                        discountPrice: +val.discount_price,
                        goodsPrice: +val.goods_price,
                        relation: val.relation,
                        discountRate: +val.discount_rate,
                        memberRate: +val.member_rate
                    }
                }
               // this.$confirm("确认提交？").then(_ => {
                    this.$fetch.post(editGoodsByPc,params).then(res=>{
                        this.$message({
                            message: '修改成功',
                            type:'success',
                            duration: 500
                        });
                    }).catch(err=>{
                        this.$message({
                            message: res.messgae,
                            type: "warning"
                        });
                    })
                //})
            }
        },
        soldChange(scope,soldout){
            let params = {
                data:{
                    goodsId: scope.row.goods_id,
                    soldout: soldout,
                    relation: scope.row.relation
                }
            }
            this.$confirm("确认提交？").then(_ => {
                this.$fetch.post(editGoodsByPc,params).then(res=>{
                    this.$message({
                        message: res.message,
                        type:'success',
                        duration: 1000
                    });
                    setTimeout(()=>{
                        scope.row.soldout = soldout
                    },800)
                }).catch(err=>{
                    // this.$message({
                    //     message: err.messgae,
                    //     type: "success"
                    // });
                })
            })
        },
        //编辑商品
        editGoods(scope) {
           
            this.$router.push({ path: "/editGoods/" + scope.row.relation });
        },
        goBack() {
            this.$router.push({ path: "/activityList" });
        },
        handlePageChange(page) {
            this.page = page;
            this.searchRequest(this.page);
            this.$store.dispatch("saveActivityGoodsListPage", this.page);
        },
        searchRequest(page) {
            this.$store.dispatch("saveActivityGoodsListName", this.searchName || '');
            this.$store.dispatch("saveActivityGoodsListBarCode", this.barCode || '');
            var params = {
                data: {
                    storeNo: this.user.storeNo,
                    activityId: this.$route.params.id,
                    page: page || 1,
                    size: "10",
                    name: this.searchName,
                    saleStatus: 'all',
                    barCode: this.barCode
                }
            };
            this.$fetch.post(activityGoodsForPc, params).then(res => {
                this.goodsList = res.data;
                this.total = res.total;
            }).catch(err => {
                this.$message({
                    message: res.message,
                    type: "warning"
                });
            });
        }
    }
};
</script>

<style scoped lang="less">
.el-form-item {
    display: inline-block;
}
.pl {
    margin: 10px 0;
}
.page {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}
.activity-right {
    h3 {
        margin-bottom: 20px;
    }
    .addGoods {
        margin-bottom: 20px;
        position: absolute;
        right: 0;
        top: 0;
    }
}
.el-form {
    width: 100% !important;
}
.goodsItem {
    position: relative;
    display: inline-block;
    width: 75%;
    .selGoodsItem {
        width: 179px;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: inline-block;
        cursor: pointer;
    }
    section {
        position: absolute;
        left: 10px;
        top: 48px;
        background: #fff;
        border: 1px solid #e4e7ed;
        z-index: 99999;
        &:after {
            content: "";
            position: absolute;
            top: -8px;
            left: 75px;
            display: block;
            width: 0;
            height: 0;
            border-bottom: 8px solid #e4e7ed;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
        }
        &:before {
            content: "";
            position: absolute;
            top: -6px;
            left: 76px;
            display: block;
            width: 0;
            height: 0;
            border-bottom: 6px solid #fff;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            z-index: 99999;
        }
    }
}
.search-2 {
    position: absolute;
    left: 400px;
    bottom: 0px;
    width: 200px;
}
.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
.table {
    img {
        width: 100%;
    }
}
.jumpPage {
    position: absolute;
    right: 0;
    bottom: 0;
    // width: 300px;
    input,
    .el-input {
        display: inline-block;
    }
}
.search-input {
    width: 200px;
}
.right {
    float: right;
    z-index: 999999999;
}
.bigImg{
    z-index: 9999;
    position: fixed;
    top: 50%;
    margin-top: -400px;
    left: 50%;
    margin-left: -400px;
    width:800px;
    height:800px;
    .close{
        position: absolute;
        top:40px;
        right:40px;
        color: red;
        font-size: 30px;
    }
    img{
        width:800px;
        height:800px;
    }
}
.wrap-wrap{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #eee;
    z-index: 33;
    opacity: .2;
}
</style>